import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0

/**EMIdExpander.qml
  * 提供二级列表的渲染外部需要设置高度以及宽度
  * 通过setModelData传递需要渲染的数据
  * 通过监听itemClick，得到具体的点击项
  *
  * 简要使用方式
    EMIdExpander{
        height: parent.height
        width: 200

        onItemClick: (res)=>{
            console.log(res)
        }

        Component.onCompleted: {
            setModelData([
                {p: "tacom", t: "123"},
                {p: "tacom", t: "12345"},
                {p: "ta", t: "123"},
                {p: "t", t: "1"},
                {p: "t111", t: "1"},
                {p: "t2222", t: "1"}
            ])
        }
    }
  */

Item {
    id: root
    signal itemClick(string name)

    // 列表区域
    ListView{
        id: listView
        anchors.fill: parent
        model: ListModel{ id: listModel }  // 存储数据
        delegate: listDelegate  // 具体渲染
        highlight: listHeghlight  // 目标高亮
        clip: true
        spacing: 6 // 间隔
        ScrollBar.vertical: FluScrollBar {
            anchors.right: parent.right
            anchors.rightMargin: 2
        }
    }


    // 高亮滑块
    Component{
        id: listHeghlight
        Item{
            clip: true
            Rectangle{
                height: 18
                radius: 1.5
                color: FluTheme.primaryColor
                width: 3
                anchors{
                    top: parent.top
                    topMargin: 6
                    left: parent.left
                    leftMargin: 2
                }
            }
        }
    }

    // 渲染组件
    Component {
        id: listDelegate
        Column {
            id:objColumn

            // 初始时子项目不可视
            Component.onCompleted: {
                for(var i = 1; i < objColumn.children.length - 1; ++i) {
                    objColumn.children[i].visible = false
                }
            }

            // 展开按钮
            Button {
                id: viewButton
                width: parent.width
                height: 30
                background: Rectangle{
                    color: {
                        if(viewButton.hovered){
                            return FluTheme.itemHoverColor
                        }
                        return FluTheme.itemNormalColor
                    }
                }
                contentItem: Item{
                    id: content
                    anchors.fill: parent
                    RowLayout{
                        anchors.fill: parent
                        spacing: 0
                        anchors.verticalCenter: parent.verticalCenter

                        FluIcon{
                            leftPadding: 10
                            iconSource: FluentIcons.Folder
                            iconSize: 16
                        }

                        FluText{
                            leftPadding: 4
                            Layout.fillWidth: true
                            text: patientName
                        }

                        FluIcon{
                            rightPadding: 5
                            iconSource: FluentIcons.ChevronDown
                            iconSize: 16
                        }
                    }
                }

                onClicked: {
                    // 滑块移动
                    listView.currentIndex = findPatientIndex(patientName)

                    // 展示对应数据
                    for(var i = 1; i < objColumn.children.length - 1; ++i) {
                        objColumn.children[i].visible = !objColumn.children[i].visible
                    }
                    // console.log(listView.currentIndex)
                }
            }

            // 展开项目
            Repeater{
                model: subNode

                delegate: Button{
                    id: delegateButton
                    height: 24
                    width: root.width
                    background: Rectangle{
                        color: {
                            if(delegateButton.hovered){
                                return FluTheme.itemHoverColor
                            }
                            return FluTheme.itemNormalColor
                        }
                    }
                    contentItem: Item{
                        anchors.fill: parent
                        FluText{
                            anchors.verticalCenter: parent.verticalCenter
                            leftPadding: 12
                            text: testId
                        }
                    }
                    onClicked: {
                        root.itemClick(click)
                    }
                }
            }

        }
    }

    function setModelData(dataArray){
        listModel.clear()
        for(var i = 0; i < dataArray.length; i++){
            const o = dataArray[i]
            addModelData(o.patientName, o.testId)
        }
    }

    function addModelData(patientName, testId){
        var index = findPatientIndex(patientName)
        if(index === -1){
            listModel.append({
                "patientName":patientName,
                "level":0,
                "subNode":[{
                    "testId":testId,
                    "click": patientName + "/" + testId,
                    "level":1,
                    "subNode":[]
                }]
            })
        }else{
            const nodeList = listModel.get(index).subNode
            var node_index = findSubIndx(nodeList, testId)
            if (node_index === -1){
                nodeList.append({
                    "testId":testId,
                    "click": patientName + "/" + testId,
                    "level":1,
                    "subNode":[]
                })
            }
        }
    }

    function findPatientIndex(name){
        for(var i = 0 ; i < listModel.count ; ++i){
            if(listModel.get(i).patientName === name){
                return i
            }
        }
        return -1
    }

    function findSubIndx(nodeList, testId){
        for(var i = 0; i < nodeList.count; i++){
            if(nodeList.get(i).testId === testId){
                return i
            }
        }
        return -1
    }
}
